<template>
 <div class="home">
   <el-row :gutter="20" class="mgb20">
     <el-col :span="7">
       <el-card>
         <div class="grid-content">
           <div class="grid-cont-center">
             <div style="">用户总数:
               <span style="font-size: 36px;color: #de0660">{{usercount}}</span>
             </div>
           </div>
         </div>
       </el-card>
     </el-col>
     <el-col :span="7">
       <el-card>
         <div class="grid-content">
           <div class="grid-cont-center">
             <div>游戏总数
               <span style="font-size: 36px;color: #de0660">{{gamecount}}</span>
             </div>
           </div>
         </div>
       </el-card>
     </el-col>
     <el-col :span="7">
       <el-card>
         <div class="grid-content">
           <div class="grid-cont-center">
             <div>订单数量
               <span style="font-size: 36px;color: #de0660">{{ordercount}}</span>
             </div>
           </div>
         </div>
       </el-card>
     </el-col>
   </el-row>
   <div class="chart">
   <el-row :gutter="10">
      <el-col :span="10">
       <div style="background-color:#92719f">
           <ve-pie :data="consumerSex" :theme="options" :settings="chartSettings" ></ve-pie>
        </div>
      </el-col>

     <el-col :span="10">
       <div style="background-color:#92719f">
         <ve-histogram :data="consumerSex" :theme="options1"></ve-histogram>
       </div>
     </el-col>
     </el-row>
   </div>
 </div>
</template>

<script>
import {getallusers,getallgame,getallorder} from "../api";
export default {
  name: "Home",
  data(){
    return{
      chartSettings: {
        type: 'pie',
        center: ['10%'],
      },
      userlist:[], //全部用户信息。
      usercount: 0,  //全部用户数量。
      gamecount: 0,  //游戏数量。
      ordercount: 0,
      consumerSex :{           //按性别分类的用户数
        columns: ['性别','总数'],
        rows: [
          {'性别': '男','总数': 0},
          {'性别': '女','总数': 0}
        ],
      },
      options: {
        color: ['#87cefa','#ffc0cb']
      },
      options1: {
        color: ['yellow']
      },
    }
  },
  methods:{
    setSex(sex,val) {              //根据性别获取用户数
      let count = 0;
      for(let item of val){
        if(sex == item.sex){
          count++;
        }
      }
      return count;
    },
    //获取全部用户信息
    getallUser(){
      //获取所有用户信息
      getallusers().then((res)=>{
        console.log(res)
        this.userlist = res.data.userlist;
        this.usercount = res.data.userlist.length;
        this.consumerSex.rows[0]['总数'] = this.setSex(1,this.userlist);
        this.consumerSex.rows[1]['总数'] = this.setSex(0,this.userlist);
      })
      //获取所有游戏信息
      getallgame().then((res)=>{
        this.gamecount = res.data.data.Game.length;
      })
      //获取所有订单信息
      getallorder().then((res)=>{
        this.ordercount = res.data.order.length;
      })
    }
  },
  mounted() {
    this.getallUser();
  }
}
</script>

<style scoped>
.chart{
   margin-top: 80px;
  margin-left: 40px;
}
.el-col-12{
  height: 40%;
}
.el-col{
  margin-left: 50px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 50px;
}

.grid-cont-center {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}

.grid-num {
  font-size: 12px;
  font-weight: bold;
}
</style>
